/**
 * Copyright (c) 2017-present, Daniel
 * All rights reserved.
 *
 * @flow
 */

import React, {PureComponent} from 'react'
import {StyleSheet, View, Image, Text, TouchableOpacity, Dimensions,FlatList} from 'react-native'
import color from '../../widget/color'
import NavigationItem from '../../widget/NavigationItem'
import HomeMenuView from './HomeMenuView'
import * as api from '../../api'
import screen from '../../common/screen'
import HomeGridView from './HomeGridView'
import SpacingView from '../../widget/SpacingView'
import {Heading3} from '../../widget/Text'
import GroupPurchaseCeil from '../../scene/GroupPurchase/GroupPurchaseCeil'

type Props = {

}

type State = {
    discounts: Array<Object>,
    dataList:Array<Object>,
    refreshing:Boolean
   
}

class HomeScene extends PureComponent<Props, State> {

    static navigationOptions = ({navigation}) => ({
        headerTitle: (
            <TouchableOpacity style={styles.searchBar}>
                <Image source={require('../../img/home/search_icon.png')} style={styles.searchIcon} />
                <Text>搜索</Text>
            </TouchableOpacity>
        ),
        headerLeft: (
            <NavigationItem
                title='定位'
                titleStyle={{color: 'white'}}
            />
        ),
        headerRight: (
            <NavigationItem
                icon={require('../../img/mine/icon_navigationItem_message_white.png')}
                onPress={() => {
                    navigation.navigate('WebScene')
                }}
            />
        ),
        headerStyle: {backgroundColor: color.primary},
    })

    constructor(props: Object) {
        super(props)

        this.state = {
            discounts: [],
            dataList:[],
            refreshing:false,
        }
    }

    componentDidMount() {
        this.requestData()
    }

    requestData = async () => {
        this.requestDiscount();
        this.requestRecommend();
    }
    requestDiscount=async()=>{
         try {
            let response = await fetch(api.discount)
            let json = await response.json()
            this.setState({discounts: json.data})
        } catch (error) {
            alert('error ' + error)
        }
    }
    requestRecommend = async()=>{
        try {
            this.setState({refreshing:true})
            let response = await fetch(api.recommend)
            let json = await response.json()
            let dataList = json.data.map((info)=>(
                {
                    id:info.id,
                    imageUrl:info.imgurl,
                    title:info.mname,
                    subtitle:`[${info.range}${info.title}]`,
                    price:info.price
                }
            ))
            this.setState({
                dataList:dataList,
                refreshing:false
            })
            
        } catch (error) {
            alert('error ' + error)
            this.setState({refreshing:false})
        }
    }

    //选中方法
    onGridSelected=(index)=>{
            let  discount = this.state.discounts[index];
            
    }
    renderHeader=()=>{
        return (
             <View>
                                <HomeMenuView
                    menuInfos={api.menuInfos}
                    onMenuSelected={(index) => {
                        alert('test ' + index)
                    }}
                />
                <SpacingView />

                <HomeGridView infos={this.state.discounts}
                    onGridSelected={this.onGridSelected}
                />

                <SpacingView />
                <View style={styles.recommandHeader}>
                    <Heading3>猜你喜欢</Heading3>
                </View>
                         </View>
        )
    }
    renderItem=(rowData)=>( <GroupPurchaseCeil 
                            info={rowData.item}
                            onPress={this.onCeilSelected}
                    
                />)

    onCeilSelected=(info)=>{
        this.props.navigation.navigate('GroupPurchaseScene',{info:info})
    }
    
    render() {
        return (
            <View style={{flex: 1}}>
                

                <FlatList
                     ListHeaderComponent={()=>this.renderHeader()}
                     data={this.state.dataList}
                     renderItem={  this.renderItem}
                     keyExtrator={(item,index)=>index}
                     //下拉刷新
                     onRefresh={this.requestData}
                     refreshing={this.state.refreshing}
                />
               

            </View>
        )
    }

}

const styles = StyleSheet.create({
    searchBar: {
        flexDirection: 'row',
        width: screen.width * 0.7,
        height: 30,
        borderRadius: 19,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',

    },
    searchIcon: {
        width: 20,
        height: 20,
        margin: 5,
    },
    recommandHeader:{
        height:30,
        borderWidth:StyleSheet.hairlineWidth,
        borderColor: color.border,
        paddingVertical: 8,
        paddingLeft:20,
        backgroundColor:'white'
    }
})

export default HomeScene